<template>
  <header class="header-wrapper">
    <div class="logo"></div>
    <div class="header-right">
      <div class="user-info">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <span class="user-name">{{realName}}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>修改密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="user-logout" @click="logout()">
        <span class="iconfont icon-logout"></span>
        退出
      </div>
    </div>
  </header>
</template>
<script>
  export default {
    props:['login_user'],
    data(){
      return {
        realName:''
      }
    },
    methods:{

    },
    created(){
      let that = this;
      that.realName = that.login_user.realName;
    }
  }
</script>
<style lang="less">
  .header-wrapper{
    height: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo{
      width: 180px;
      height: 60px;
      background: url('../assets/img/home_logo.png') no-repeat center/cover;
    }
    .header-right{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .user-info{
        margin-right: 40px;
        .user-name{
          font-size: 18px;
          color: #000;
        }
      }
      .user-logout{
        font-size: 18px;
        .icon-logout{
          font-size: 24px;
        }
      }
    }
  }
</style>
